<template>
  <div id="myflow">
    <card >
      <div slot="content" class="card-demo-flex card-demo-content01">
        <flow v-if="stepindex===1">
          <flow-state state="1" title="选择报名项目" is-done></flow-state>
          <!--<flow-state state="1" :title=" $t('flow.ChooseRegistrationItems') " is-done>   </flow-state>-->
          <flow-line tip="选择报名项目"></flow-line>
          <flow-state state="2" title="阅读并同意参赛声明"></flow-state>
          <flow-line></flow-line>
          <flow-state state="3" title="填写/选择报名信息"></flow-state>
          <flow-line></flow-line>
          <flow-state state="4" title="成功"></flow-state>
        </flow>

        <flow v-if="stepindex===2">
          <flow-state state="1" title="选择报名项目" is-done @click.native="pushRouter('list')"></flow-state>
          <flow-line is-done></flow-line>
          <flow-state state="2" title="阅读并同意参赛声明" is-done></flow-state>
          <flow-line tip="阅读并同意参赛声明"></flow-line>
          <flow-state state="3" title="填写/选择报名信息"></flow-state>
          <flow-line></flow-line>
          <flow-state state="4" title="成功"></flow-state>
        </flow>

        <flow v-if="stepindex===3">
          <flow-state state="1" title="选择报名项目" is-done @click.native="pushRouter('/list')"></flow-state>
          <flow-line is-done></flow-line>
          <flow-state state="2" title="阅读并同意参赛声明" is-done @click.native="pushRouter('/disclaimer')"></flow-state>
          <flow-line is-done></flow-line>
          <flow-state state="3" title="填写/选择报名信息" is-done></flow-state>
          <flow-line tip="填写/选择报名信息"></flow-line>
          <flow-state state="4" title="成功"></flow-state>
        </flow>

        <flow v-if="stepindex===4">
          <flow-state state="1" title="选择报名项目" is-done></flow-state>
          <flow-line is-done></flow-line>
          <flow-state state="2" title="阅读并同意参赛声明" is-done></flow-state>
          <flow-line is-done></flow-line>
          <flow-state state="3" title="填写/选择报名信息" is-done></flow-state>
          <flow-line is-done></flow-line>
          <flow-state state="4" title="成功" is-done></flow-state>
        </flow>
      </div>
    </card>
  </div>
</template>

<script type="text/ecmascript-6">
import { Card, Flow, FlowState, FlowLine } from "vux";

export default {
  data() {
    return {
      lists: [
        "选择报名项目",
        "阅读并同意参赛声明",
        "填写／选择报名信息",
        "报名成功"
      ]
    };
  },
  props: {
    stepindex: Number
  },
  created() {},
  methods: {
    pushRouter(path) {
      this.$router.push({ path: path });
    }
  },
  components: {
    Card,
    Flow,
    FlowState,
    FlowLine
  }
};
</script>


<style lang="less" rel="stylesheet/less">
#myflow [class^="weui-wepay-flow__title-"],
#body [class*=" weui-wepay-flow__title-"] {
  white-space: normal;
  min-width: 70px;
}

#myflow .flowgroup {
  white-space: normal;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  background-color: #e2e2e2;
  height: 3px;
  position: relative;
  .weui-wepay-flow__li {
    height: 6px;
  }
}
</style>
